<template>
    <div class="main-con editMicroPage">
        <!-- 顶部导航 -->
        <div class="breadcrumb-con">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/microPage' }">微页面</el-breadcrumb-item>
                <el-breadcrumb-item>{{ editText }}微页面</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 编辑容器 -->
        <div class="edit-con">
            <!--头部-->
            <div class="header-con" @click="editHeaderMsg">
                <div>{{updataForm.title}}</div>
                <div class="header-con-eidt" v-show="titleFormFlag">
                    <el-form :rules="rules" ref="updataForm" :model="updataForm" label-width="80px">
                        <el-form-item label="页面标题" prop="title">
                            <el-input v-model="updataForm.title" placeholder="微页面标题"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!--编辑容器  拖拽   -->
            <div class="content-con">
                <!--内容栏-->
                <sortable-list v-model="items" :useWindowAsScrollContainer="true" :Autoscroll="true" :useDragHandle="true"
                    :hideSortableGhost="true" @sortStart="startMove">
                    <sortable-item v-for="(item,index) in items" :index="index" :key="index" @closeFn="deleteCurrentItem(index)"
                        @addNewItemsUp="addNewItemsUpFn(index)" @addNewItemsDown="addNewItemsDownFn(index)" :activeFlag="item.active"
                        :activeIndex="activeItem">
                        <parent :types="item.type" :dataObj="item"></parent>
                    </sortable-item>
                </sortable-list>

                <!--客服图标-->
                <div class="serviceBox" v-if="updataForm.isShowService == 1">
                    <img src="../../../../static/images/service@2x.png" />
                </div>

                <!--添加组件    动态栏-->
                <div class="select-component-con" v-show="addItemsBoxFlag" ref="addItemsBox">
                    <div class="select-component-title">组件选择：</div>
                    <div class="button-grounp">
                        <span class="button-grounp-item">图文广告</span>
                        <span class="button-grounp-item">图文导航</span>
                        <span class="button-grounp-item">商品</span>
                        <span class="button-grounp-item">商品分组</span>
                        <span class="button-grounp-item">限时折扣</span>
                        <span class="button-grounp-item">魔方</span>
                        <span class="button-grounp-item">公告</span>
                        <span class="button-grounp-item">搜索</span>
                        <span class="button-grounp-item">优惠券</span>
                    </div>
                </div>
            </div>

            <!-- 组件选择 -->
            <div class="select-component-con">
                <div class="select-component-title">组件选择：</div>
                <div class="button-grounp">
                    <span class="button-grounp-item" :data-obj="JSON.stringify(_objType.imageTextAD)" @click="addItem">图文广告</span>
                    <span class="button-grounp-item" :data-obj="JSON.stringify(_objType.imageText)">图文导航</span>
                    <span class="button-grounp-item" :data-obj="JSON.stringify(_objType.goods)">商品</span>
                    <span class="button-grounp-item" :data-obj="JSON.stringify(_objType.goodsGroup)">商品分组</span>
                    <span class="button-grounp-item" :data-obj="JSON.stringify(_objType.discount)">限时折扣</span>
                    <span class="button-grounp-item" :data-obj="JSON.stringify(_objType.magicCube)">魔方</span>
                    <span class="button-grounp-item" :data-obj="JSON.stringify(_objType.notice)">公告</span>
                    <span class="button-grounp-item" :data-obj="JSON.stringify(_objType.search)">搜索</span>
                    <span class="button-grounp-item" :data-obj="JSON.stringify(_objType.discountCoupon)">优惠券</span>
                </div>
            </div>
            <!-- 客服 -->
            <div class="service-con">
                <div class="title">在线客服：</div>
                <el-radio-group v-model="updataForm.isShowService">
                    <el-radio :label="0">隐藏</el-radio>
                    <el-radio :label="1">显示</el-radio>
                </el-radio-group>
            </div>
        </div>

        <!--按钮组-->
        <div class="edit-footer-con">
            <el-button type="primary" @click="saveItem('updataForm')" size="small">保存</el-button>
            <el-button type="primary" @click="previewPage" size="small">预览效果</el-button>
        </div>
    </div>
</template>

<script>
import sortableItem from "./components/SortableItem.vue";
import sortableList from "./components/SortableList.vue";
import parent from "./element/index.vue";
import * as objType from "@/common/js/objType.js";
export default {
    name: "editMicroPage",
    data() {
        return {
            editType: "", //操作类型  add=添加  update=修改
            editText: "", //操作文字

            titleFormFlag: false, //控制头部编辑框显示隐藏的标识
            addItemsBoxFlag: false, //控制动态组件添加栏的标识

            _objType: "",

            activeItem: 0,

            items: [
                {
                    active: false,
                    type: "图文广告"
                }
            ],

            updataForm: {
                isShowService: 0,
                title: "",
                catatoryId: "",
                webDescribe: "",
                backGroundColor: "#ffffff",
                webModelList: []
            },
            rules: {
                title: [
                    {
                        required: true,
                        message: "请填写页面名称",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        this.editType = this.$route.query.editType;
        this.editText = this.$route.query.editText;

        this._objType = objType;
    },
    methods: {
        //添加组件
        addItem(e) {
            this.items.forEach(function(item, idx) {
                item.active = false;
            });
            const _addObj = JSON.parse(e.target.dataset.obj);
            this.items.push(_addObj);
            this.titleFormFlag = false;
            this.addItemsBoxFlag = false;
        },
        //关闭组件
        deleteCurrentItem(idx) {
            this.$confirm("确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let prv = this.items[idx - 1];
                    let next = this.items[idx + 1];
                    this.items.splice(idx, 1);
                    var _flag = true;
                    this.items.forEach(function(data, idx) {
                        if (data.active) {
                            _flag = false;
                        }
                    });
                    if (_flag) {
                        if (prv) {
                            prv.active = true;
                        } else if (next) {
                            next.active = true;
                        }
                    }
                })
                .catch(() => {});
            this.addItemsBoxFlag = false;
        },

        //组件顶部添加按钮
        addNewItemsUpFn() {
            alert("up");
            this.addItemsBoxFlag = true;
            this.$refs.addItemsBox.style.top =
                event.path[1].offsetTop - 15 + "px";
        },

        //组件底部添加按钮
        addNewItemsDownFn() {
            alert("down");
            this.addItemsBoxFlag = true;
            this.$refs.addItemsBox.style.top =
                event.path[1].offsetTop +
                event.path[1].offsetHeight -
                10 +
                "px";
        },

        editHeaderMsg() {
            this.items.forEach(function(item, idx) {
                item.active = false;
            });
            this.titleFormFlag = true;
            this.addItemsBoxFlag = false;
        },

        startMove(data) {
            this.addItemsBoxFlag = false;
            this.titleFormFlag = false;
            this.items.forEach(function(item, idx) {
                item.active = false;
            });
            this.items[data.index].active = true;
        },

        previewPage() {
            this.previewPageFlag = true;
            this.saveItem("updataForm");
        }
    },
    components: {
        sortableItem,
        sortableList,
        parent
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.editMicroPage {
    margin-bottom: 55px;
}
.edit-con {
    width: 320px;
    min-height: 600px;
}
/*头部*/
.edit-con .header-con {
    position: relative;
    width: 100%;
    height: 63px;
    font-size: 16px;
    text-align: center;
    padding-top: 28px;
    line-height: 35px;
    box-sizing: border-box;
    color: #fff;
    background: url(https://qdmosshuanan01.oss-cn-shenzhen.aliyuncs.com/mallH5/DKPKDi6Q3pWckeTPbxM6w2ZxKYKDa8T6.png);
}

.header-con .header-con-eidt {
    position: absolute;
    width: 420px;
    top: 0;
    left: 330px;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    padding: 10px 10px 20px;
    background-color: #f8f8f8;
}

.header-con .header-con-eidt::before {
    content: "";
    position: absolute;
    border-right: 8px solid #ccc;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    left: -8px;
    top: 5px;
}
.header-con .header-con-eidt::after {
    content: "";
    position: absolute;
    border-right: 8px solid #f8f8f8;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    left: -7px;
    top: 5px;
}
/*编辑容器*/
.edit-con .content-con {
    width: 320;
    min-height: 300px;
    position: relative;
}

.content-con .serviceBox {
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    left: 10px;
    bottom: 50px;
    z-index: 100;
}

.content-con .serviceBox img {
    height: 50px;
    width: 50px;
    border-radius: 100px;
}

.content-con .select-component-con {
    position: absolute;
    top: 158px;
    left: 330px;
    width: 320px;
    height: 168px;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    border-radius: 3px;
    padding: 10px;
    background-color: #ffffff;
}

.content-con .select-component-con::before {
    content: "";
    position: absolute;
    border-right: 8px solid #ccc;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    left: -8px;
    top: 5px;
}

.content-con .select-component-con::after {
    content: "";
    position: absolute;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    left: -7px;
    top: 5px;
}

.content-con .select-component-con .select-component-title {
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 14px;
}

/*组件选择*/
.edit-con .select-component-con {
    width: 100%;
    box-sizing: border-box;
    min-height: 160px;
    border: 1px solid #e1e1e1;
    padding: 10px;
    background-color: #fff;
}

.select-component-con .select-component-title {
    margin-bottom: 5px;
    font-size: 14px;
    margin-top: 5px;
}

.select-component-con .button-grounp .button-grounp-item {
    display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    border: 1px dashed #cccccc;
    background-color: #f2f2f2;
    margin-bottom: 10px;
    box-sizing: border-box;
    margin-right: 24px;
}

.select-component-con .button-grounp .button-grounp-item:nth-child(3n) {
    margin-right: 0;
}

.select-component-con .button-grounp .button-grounp-item:hover {
    color: #3399ff;
    cursor: pointer;
    background-color: #dbe8f5;
}

/*客服*/
.edit-con .service-con {
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    line-height: 40px;
}

.service-con .title {
    font-size: 14px;
}

/*按钮组*/
.edit-footer-con {
    position: fixed;
    left: 200px;
    right: 0;
    bottom: 0;
    height: 50px;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
    box-shadow: 0 -3px 5px #eee;
    z-index: 1000;
}
</style>